<template> 
  <div class="all">
    <div class="header">
    <h1>待办事项</h1>
    <input type="text" placeholder="请输入您的待办事项，回车后即可添加哟"  v-model="txt" @keyup.enter="enterAdd">
    <p v-if="isshow">最多输入50个字符哟！！！</p>
  </div>
  <div class="content">
    <div>
      <div class="content_list" v-for="item ,index in list">
        <label :class="{ 'gray-text': tt.includes(item.id)||item.isok==1 }">
          <input type="checkbox" v-model="tt" :value="item.id" @change="checkboxChange(index,$event)">{{item.con}}
        </label>
        <button @click="btndel(index)">删除</button>
      </div>
    </div>
    <!-- {{ tt }} -->
  </div>
  <div class="total">
    <div class="total_sty">
      <span>总计:{{ count }}</span>
      <div>
        <input type="button" value="全部" @click="tabType(0)">
        <input type="button" value="未完成" @click="tabType(1)">
        <input type="button" value="已完成" @click="tabType(2)">
      </div>
    </div>
    </div>
  </div>
</template>

<script setup>
import { ref ,watch} from 'vue';
// isok表示是否完成，0为未完成，1为已完成
let arr=[
  {
    id:1,
    con:'学习Vue.js前段框架',
    isok:0
  },
  {
    id:2,
    con:'完成Vue.js的第一个案例',
    isok:0
  },
  {
    id:3,
    con:'动态路由',
    isok:0
  }   
]

// 从本地存储获取，如果没有则创建一个数组 // 页面显示数据
let list=ref(JSON.parse(localStorage.getItem('uu'))|| arr)
// console.log(list);

// 原始数据
let oldlist=ref(list.value)



// 复选框结果的存储，结果为true时保存
let tt=ref([])
// 添加待办事项的内容存储变量
let txt=ref('')
// 计算总数
let count=ref(list.value.length)

let isshow=ref(false)

// 侦听输入框的字符串长度是否超过50
watch(txt,(newvalue,oldvalue)=>{
  console.log(newvalue);  
  let num=newvalue.length
  console.log(num);
  if(num>50){
    isshow.value=true
  }
  else{
    isshow.value=false
  }
})

// 添加待办事项
function enterAdd(){
  let obj={
    id:list.value[list.value.length-1].id+1,
    con:txt.value,
    isok:0
  }
  // 将输入框原本的内容清空
  txt.value=''
  // 将显示列表的数据与原始数据同步
  list.value.push(obj)

  // 尝试将数据添加到本地存储中
  localStorage.setItem('uu',JSON.stringify(list.value))

  count.value=list.value.length
}
// 删除按钮
function btndel(index){
  // 将数据从原始数据中删除
  list.value.splice(index,1)

  count.value=list.value.length

  // 将删除后的数据重新上传到本地存储中
  localStorage.setItem('uu',JSON.stringify(list.value))
}

// 复选框状态的改变，更改数组列表中的isok的值
function checkboxChange(index,event){
  // console.log(`${index+1}的复选框状态`,event.target.checked);
  let ischeckbox=event.target.checked
  if(ischeckbox){
    list.value[index].isok=1
    // console.log(list);
    // 将复选框的数据重新上传到本地存储中
    localStorage.setItem('uu',JSON.stringify(list.value))
  }
  else{
    list.value[index].isok=0
    localStorage.setItem('uu',JSON.stringify(list.value))
  }
}

// 筛选按钮，全部、未完成、已完成
function tabType(cc){
  if(cc===0){
    list.value=[...oldlist.value]
    count.value=list.value.length
  }
  else if(cc===1){
    list.value=oldlist.value.filter(item=>item.isok===0)
    count.value=list.value.length
  }
  else if(cc===2){
    list.value=oldlist.value.filter(item=>item.isok===1)
    count.value=list.value.length
  }

}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
/* 定义灰色文字样式 */
.gray-text {
  color: #999;
  /* 添加删除线 */
  text-decoration: line-through;
}
#app{
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #999;
  justify-content: center;
  align-items: center;
}
.all{
  width: 800px;
  height: 500px;
  background-color: plum;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.header{
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}
.header>input{
  width: 90%;
  height: 35px;
  border: none;
  border-radius: 10px;
  text-indent: 10px;
}
.content{
  flex: 1;
  border: 1px solid;
  display: flex;
  justify-content: center;
}
.content>div{
  width: 95%;
  margin-top: 10px;
}
.content_list{
  display: flex;
  justify-content: space-between;
  background-color: rgb(118, 118, 255);
  width: 100%;
  padding: 5px;
  border-bottom: 1px dashed red;  
}
.content_list:first-child{
  border-radius: 10px 10px 0px 0px;
}
.content_list:last-child{
  border-radius: 0px 0px 10px 10px;
  border: none
}
.total{
  height: 50px;
  border: 1px solid;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.total_sty{
  width: 95%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: antiquewhite;
  padding: 0px 10px 0px 10px ;
  border-radius: 10px;
}
.total input{
  border: none;
  margin-right: 10px;
  background-color: transparent;
}
.total input:hover{
  color: green;
}
</style>